<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">

<head>
	<title>抽签</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 移动设备 viewport -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
	<meta name="author" content="admui.com">
	<!-- 360浏览器默认使用Webkit内核 -->
	<meta name="renderer" content="webkit">
	<!-- 禁止搜索引擎抓取 -->
	<meta name="robots" content="nofollow">
	<!-- 禁止百度SiteAPP转码 -->
	<meta http-equiv="Cache-Control" content="no-siteapp">

	<link rel="stylesheet" href="../public/themes/classic/global/css/bootstrap.css">
	<link rel="stylesheet" href="../public/themes/classic/base/css/site.css" id="siteStyle">
	<!-- 图标 CSS-->
	<link rel="stylesheet" href="../public/fonts/font-awesome/font-awesome.css">
	<link rel="stylesheet" href="../public/fonts/web-icons/web-icons.css">
	<style>

		.user-content{
			max-height: 410px;
    		overflow-y: scroll;
		}
		.widget {
			cursor: pointer;
		}
		.info-panel{
			float: left;
			padding: 0 10px;
		}
		.btn-lg {
			width: 170px;
		}
		.row-line {
			display: flex;
    		flex-direction: row;
    		overflow-x: scroll;
		}
		.row-line .info-panel {
			min-width: 285px;
		}
		.page-tool{

		}
		p {
    		margin: 0 0 8px;
			font-size: 15px;
		}
		th,td {
			font-size: 16px;
		}
		.row-no {
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
		}
		.no {
			display: block;
			width: 470px;
			height: 100px;
			line-height: 100px;
			border-radius: 20px;
			font-size: 40px;
		}
		.type-text {
			font-size: 20px;
		}

	</style>
</head>

<body>
	<div class="page animation-fade page-index" id="app">
		<template>
		<div class="page-content container-fluid">
			<h2>抽签小组{{groups.length == 0 ? '：暂无数据' : ''}}</h2>
			<div class="row row-line" data-plugin="matchHeight" data-by-row="true">
				<!--<span class="page-tool">上一页</span>-->
				<div class="info-panel" @click="clickGroup(i)" v-for="(item, i) in groups" :key="i">
					<div class="widget widget-shadow" :class="[group.id == item.id ? 'bg-blue-600 white':'']">
						<div class="widget-content padding-10">
							<h2 class="text-center" :class="[group.id == item.id ? 'white':'']">第{{item.groupName}}组</h2>
							<p class="margin-left-15 font-weight-400">抽签时间：{{item.beginTime}}</p>
							<p class="margin-left-15 font-weight-400">参与人数：{{item.groupSize}}人</p>
						</div>
					</div>
				</div>
				<div class="info-panel" @click="clickGroup(-1)">
					<div class="widget widget-shadow" :class="[group == null || group.id == null ? 'bg-blue-600 white':'']">
						<div class="widget-content padding-10">
							<h2 class="text-center" :class="[group == null || group.id == null ? 'white':'']">未到场人员</h2>
							<p class="margin-left-15 font-weight-400"></p>
							<p class="margin-left-15 font-weight-400">未到场人数：{{unArriveNum}}人</p>
							<p class="margin-left-15 font-weight-400">该小组展示未到场人员数据</p>
						</div>
					</div>
				</div>

			</div>

			<h2>抽签人员{{details.length == 0 ? '：暂无数据' : ''}}</h2>
			<div class="row user-content" data-plugin="matchHeight" data-by-row="true">
				<div class="info-panel" @click="clickDetail(i)"  v-for="(item, i) in details" :key="i">
					<div class="widget widget-shadow " :class="[detail.id == item.id ? 'bg-blue-600 white' : item.status == 0 ? '':'bg-green-600 white']">
						<div class="widget-content padding-10">
							<p class="margin-left-5 font-weight-400">抽签编号：{{item.userNo}}</p>
							<p class="margin-left-5 font-weight-400">参与人员：{{item.userName}}</p>
							<p class="margin-left-5 font-weight-400">抽签状态：{{item.status == 0 ? '未抽签':'已抽签'}}</p>
						</div>
					</div>
				</div>

			</div>
			<div class="row row-no text-center margin-top-15">
				<span class="no bg-blue-600 white">{{random}}</span>
			</div>
			<div class="row text-center margin-top-30">
				<h3 class="">{{timeTip}}</h3>
			</div>
			<div class="row text-center margin-top-30">
				<button type="button" class="btn btn-primary btn-lg" :disabled="drawStatus === 1" @click="listHouse">开始摇号</button>
				<button type="button" class="btn btn-primary btn-lg margin-left-20" :disabled="drawStatus === 0" @click="draw">停止摇号</button>
				<button type="button" class="btn btn-default btn-lg margin-left-20" @click="setLate" style="width: 120px;">未到场</button>
			</div>
			<form class="form-horizontal margin-top-20" id="editForm" v-show="detail != null && detail.type == 1 && detail.status == 0">
				<div class="form-group">
					<label class="col-sm-6 col-xs-6 text-right control-label type-text">选择房源类型：</label>
					<div class="col-sm-6 col-xs-6">
						<div class="radio-custom radio-primary radio-inline">
							<input id="type1" name="type" value="1" type="radio" v-model="houseType" :disabled="drawStatus == 1">
							<label class="type-text" for="type1">120平</label>
						</div>
						<div class="radio-custom radio-primary radio-inline">
							<input id="type2" name="type" value="0" type="radio" v-model="houseType" :disabled="drawStatus == 1">
							<label class="type-text" for="type2">100平</label>
						</div>
					</div>
				</div>
			</form>
			<div class="row text-center margin-top-10">
				<h3 class="">剩余房源数：{{houseNum}}</h3>
			</div>
			<h2>抽签结果</h2>
			<div class="row text-center margin-top-15" v-if="result != null && result.id != null">
				<table class="table table-bordered table-hover dataTable table-striped width-full bg-white">
					<thead>
						<tr>
							<th>用户姓名</th>
							<th>证件号码</th>
							<th>抽签编号</th>
							<th>楼栋</th>
							<th>楼层</th>
							<th>房号</th>
							<th>户型</th>
							<th>建筑面积(㎡)</th>
							<th>套内面积(㎡)</th>
						</tr>
					</thead>
					<tbody>
					<tr>
						<td>{{result.userName}}</td>
						<td>{{result.idNumber}}</td>
						<td>{{result.userNo}}</td>
						<td>{{result.address}}</td>
						<td>{{result.floor}}</td>
						<td>{{result.roomNo}}</td>
						<td>{{result.huxing}}</td>
						<td>{{result.areaSpace}}</td>
						<td>{{result.roomSpace}}</td>
					</tr>
					</tbody>

				</table>
			</div>
		</div>
		</template>
	</div>

	<script src="../public/vendor/jquery/jquery.min.js"></script>
	<script src="../public/vendor/vue/vue.min.js"></script>
	<script src="../js/common.js"></script>
	<script src="../public/vendor/layer/layer.js"></script>
	<script src="../public/vendor/bootstrap/bootstrap.min.js"></script>
	<script src="../public/themes/classic/base/js/app.js"></script>
	<!--laydate日期-->
	<script src="../public/vendor/laydate/laydate.js"></script>
	<script>

		var timeId, timeDownId;
		var vm = new Vue({
			el: '#app',
			data: {
				unArriveNum: 0, // 未到场人数
				houseNum: 0, // 剩余房源数
				group: {}, // 当前选中组
				detail: {}, // 当前选中人员
				groups: [], // 小组列表
				details: [], // 抽签人员
				unArrives: [], // 未到场人员
				result: null, // 抽签结果,
				drawStatus: 0, // 摇号状态：0-未开始，1-已开始
				timeTip: '剩余倒计时15秒',
				random: '-------', // 随机数据
				houes: [], // 抽奖滚动房源
				houseType: 1,
			},
			methods: {
				clickGroup(i) {
					// 抽签中无法切换
					if(vm.drawStatus == 1) {
						layer.msg('请等待抽签完成');
						return ;
					}
					vm.random = '-------';
					// 未到场人员
					if(i == -1) {
						vm.group = {};
						vm.result = null;
						vm.listDetail(1);
						return ;
					}
					vm.group = vm.groups[i];
					vm.listDetail(0);
					vm.result = null;
				},
				clickDetail(i) {
					// 抽签中无法切换
					if(vm.drawStatus == 1) {
						layer.msg('请等待抽签完成');
						return ;
					}
					vm.random = '-------';
					vm.detail = vm.details[i];
					vm.result = null;
					vm.getDetail();
					vm.getHouseNum(); // 获取剩余房源
				},
				listGroup() {
					$.get(baseURL + 'draw/groups?limit=2000', function(data) {
						if(data.code != 0) {
							layer.msg('获取小组数据失败');
							return ;
						}
						vm.groups = data.groups;
						if(data.groups.length > 0) {
							vm.group = vm.groups[0];
							vm.listDetail(0);
						}
					});
				},
				listDetail(arrive) {
					var url = arrive == 0 ? 'draw/details?arriveStatus=0&limit=2000&groupId=' + vm.group.id : 'draw/details?arriveStatus=1&limit=2000';
					$.get(baseURL + url, function(data) {
						if(data.code != 0) {
							layer.msg('获取抽签人员失败');
							return ;
						}
						vm.details = data.details;
						if(data.details.length > 0) {
							vm.detail = vm.details[0];
							vm.getHouseNum();
						}
					});
				},
				getDetail() {
					$.get(baseURL + 'draw/result?id=' + vm.detail.id, function(data) {
						if(data.code != 0) {
							//layer.msg(data.msg);
							return ;
						}
						vm.result = data.result;
					});
				},
				// 摇号前拿到随机滚动房源
				listHouse() {
					if(!vm.checkUser()) return ;
					if(vm.drawStatus == 1) return ;
					vm.drawStatus = 1;
					var url = vm.detail.type == 1 ? 'draw/houes?type=' + vm.houseType : 'draw/houes';
					$.get(baseURL + url, function(data) {
						if(data.code != 0) {
							vm.drawStatus = 0;
							layer.msg('获取房源数据失败');
							return ;
						}
						if(data.houes.length == 0) {
							vm.drawStatus = 0;
							layer.msg('房源不足，无法抽取');
							return ;
						}
						vm.houes = data.houes;
						vm.start();
					});
				},
				// 开始摇号
				start() {
					var size = vm.houes.length;
					timeId = setInterval(function() {
						var i = Math.floor(Math.random()*(0 - size) + size);
						vm.random = vm.houes[i];
					}, 30);

					var time = 15;
					timeDownId = setInterval(function() {
						time--;
						vm.timeTip = '剩余倒计时' + time + '秒';
						if(time == 0) clearInterval(timeDownId);
					}, 1000);
				},
				// 抽签
				draw() {
					vm.drawStatus = 0;
					clearInterval(timeDownId);
					if(!vm.checkUser()) return ;
					var param = {
						detailId: vm.detail.id,
						type: vm.detail.type == 1 ? vm.houseType : null
					}
					var i = layer.load();
					$.post(baseURL + 'draw/start', param, function(data) {
						clearInterval(timeId); // 停止抽奖
						vm.timeTip = '剩余倒计时15秒';
						layer.close(i);
						if(data.code != 0) {
							vm.random = '-------';
							layer.msg(data.msg);
							return ;
						}
						vm.result = data.result;
						vm.random = data.house; // 展示结果
						vm.detail.status = 1;
						vm.getUnArriveNum();
						vm.getHouseNum(); // 获取剩余房源
						layer.msg("抽签成功");
					});
				},
				// 设置未到场
				setLate() {
					// 抽签中无法切换
					if(vm.drawStatus == 1) {
						layer.msg('请等待抽签完成');
						return ;
					}
					if(!vm.checkUser()) return ;
					var i = layer.load();
					$.get(baseURL + 'draw/late?detailId=' + vm.detail.id, function(data) {
						layer.close(i);
						if(data.code != 0) {
							layer.msg(data.msg);
							return ;
						}
						layer.msg("设置成功，重新获取抽奖人员");
						// 刷新抽签人员数据
						vm.listDetail(0);
						vm.getUnArriveNum();
					});
				},
				checkUser() {
					if(vm.details.length == 0 || vm.detail == null || vm.detail.id == null) {
						layer.msg('请选择抽签人员');
						return false;
					}
					if(vm.detail.status == 1) {
						layer.msg('该用户已完成抽签');
						return false;
					}
					return true;
				},
				// 获取未到场人数
				getUnArriveNum() {
					$.get(baseURL + 'draw/getUnArriveNum', function(data) {
						if(data.code != 0) {
							return ;
						}
						vm.unArriveNum = data.unArriveNum;
					});
				},
				// 获取剩余房源
				getHouseNum() {
					var url = vm.detail.type == 1 ? 'sys/sourceHouse/count?type=' + vm.houseType : 'sys/sourceHouse/count'
					$.get(baseURL + url, function(data) {
						if(data.code != 0) {
							return ;
						}
						vm.houseNum = data.sourceHouseNum;
					});
				}

			},
			mounted() {
				this.listGroup();
				this.getUnArriveNum();
			}
		});

		$(document).ready(function() {
			$('input[type=radio][name=type]').change(function() {
				vm.getHouseNum();
			});
		});
	</script>
</body>

</html>
